<template>
    <div>
        <div class="container">
            <div v-if="point.lon" class="point" @click="goto"></div>
            <dv-decoration-12 @click="goto" style="width:150px;height:150px;" />
            <span v-if="!point.lon" class="waring-span">拼命加载中...</span>
            <div v-if="point.lon" class="right">
                <p>E: {{ point.lon }}</p>
                <p>&nbsp;&nbsp;N: {{ point.lat }}</p>
                <p>&nbsp;&nbsp;&nbsp;深度: {{ point.depth }} Km</p>
                <p>&nbsp;&nbsp;&nbsp;震级: {{ point.scale }}</p>
                <p>&nbsp;&nbsp;时间: {{ point.time }}</p>
            </div>
            <!-- 底部 -->
            <div v-if="point.lon" class="bottom">
                <p>地点: {{ point.location }}</p>
            </div>
        </div>
    </div>
</template>

<script>
import { getLastOne } from '@/api'
export default {
    name: 'Test1LeftTop',
    data() {
        return {
            point: null
        };
    },
    computed: {
        getPoint() {
            return this.$store.state.point;
        },
    },
    watch: {
        getPoint: {
            handler(newVal, oldVal) {
                this.point = newVal;
            },
            deep: true,
            immediate: true,
        },
    },
    created() {
        this.getLastOne()
    },
    
    mounted() {
        // this.getLastOne()
    },

    methods: {
        async getLastOne() {
            const { data: res } = await getLastOne()
            this.point = res
            this.$store.commit('setPoint', res)
        },
        goto() {
            this.$store.commit('setGoto', true)
        }
    },
};
</script>

<style lang="less" scoped>
.container {
    position: relative;
    color: #1dc1f5;
    font-size: 17px;

    .right {
        position: absolute;
        top: 0;
        right: 0;
        display: inline-block;
        width: 150px;
        height: 100%;
        text-align: left;

        p {
            padding: 2px;
            margin: 0;
        }
    }

    .bottom {
        width: 95%;
        height: 100%;
        margin: 0px 5px;
    }

    .point {
        position: absolute;
        top: 50px;
        left: 100px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        animation: point 2s infinite;
        z-index: 9;
        // 鼠标样式
        cursor: pointer;
    }
}

@keyframes point {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

.waring-span {
    position: absolute;
    top: 40%;
    right: 10%;
    color: #f00;
}
</style>